<template>
  <view class="page-view page-view--has-tabber page-subscriber">
    <view class="subscriber-header">
      <view class="subscriber-header--box">
        <image
          class="subscriber-header--background"
          src="/static/images/profile/subscriber.png"
          alt
        />
        <view class="subscriber-header--tip">
          <text v-if="!isVip">未开通</text>
          <text>VIP将于{{this.deadline | date_format("YYYY.MM.DD")}}到期</text>
        </view>
      </view>
    </view>
    <view class="subscriber-body">
      <view class="subscriber-join--header">加入VIP年卡</view>
      <view>
        <view class="subscriber-join-btn">
          <view class="subscriber-join-btn--box">
            <view class="subscriber-join-content">
              <view class="join-btn-txt join-btn-txt--year ui-txt">一年</view>
              <view class="join-btn-txt join-btn-txt--price ui-txt txt-primary">￥ {{ yearPrice }}</view>
              <view class="join-btn-txt join-btn-txt--ceil ui-txt txt-info">仅需￥{{ dayPrice }}/天</view>
              <view class="join-btn-action">
                <image
                  class="join-btn-action--image"
                  src="/static/images/profile/subscriberinfo.png"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="subscriber-rule">
      <view class="rule-header">特权说明</view>
      <view class="rule-content">
        <view>1、服务期内，部分录播的观看权；</view>
        <view>2、服务期内，部分直播的免费报名功能；</view>
        <view>3、服务期内，部分视频优惠价购买；</view>
        <view>
          4、有部分视频仅供特定订阅服务的用户在服务期内观看，
          不开放直接购买；
        </view>
        <view>5、购买成功后立即生效。</view>
      </view>
    </view>

    <div class="page-view-submit-bar ui-page-tabbar flex">
      <view class="tabbar-container custom">
        <div class="tabbar__text">VIP年卡</div>
        <div class="tabbar__button-submit" @click="handleClickOpeningVip">开通VIP</div>
        <div
          class="tabbar__button-submit"
          @click="handleClickOpeningVip"
          v-if="isVip || orderStatus==2 "
        >立即续费</div>
      </view>
    </div>
  </view>
</template>

<script>
import { getUserIsVipAPI, selectAllSubscribe } from "@/api/order/profile.js";
import { addOrderAPI, wechatPayAPI } from "@/api/order/order.js";

export default {
  props: {},
  data() {
    return {
      yearPrice: "",
      dayPrice: "",
      gradeId: "",
      orderNo: "",
      isVip: false,
      deadline: "",
      orderType: null,
      flag: 1,
      resiges: null,
      orderStatus: null,
      redirect: "",
      type: 2
    };
  },
  computed: {},
  updated() {},
  created() {
    // this.type = this.$route.query.type;
    // this.orderNo = this.$route.query.orderNo;
    // this.redirect = this.$route.params.redirect;
    // this.orderStatus = this.$route.query.orderStatus;
    this.getVipInfo();
    this.loadVIPBuyInfo();
  },
  mounted() {},
  watch: {},
  methods: {
    //判断是否是VIP1
    getVipInfo() {
      getUserIsVipAPI().then(({ respCode, result, respMsg }) => {
        if (respCode == 0) {
          this.isVip = result.flag === 1 ? true : false;
          this.deadline = result.deadline;
        }
      });
    },
    loadVIPBuyInfo() {
      selectAllSubscribe().then(({ respCode, result, respMsg }) => {
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        // 暂时只有一个会员 所以
        result = result[0];
        this.yearPrice = result.gradePrice * 12 * 0.9;
        this.dayPrice = (this.yearPrice / 365).toFixed(2);
        this.gradeId = result.gradeId;
      });
    },
    //立即开通VIP操作
    handleClickOpeningVip() {
      const beforeCreateOrder = () => {
        return new Promise((resolve, reject) => {
          var params = {
            amount: this.yearPrice,
            orderType: 2,
            productId: this.gradeId,
            productNum: 12
          };
          var self = this;
          addOrderAPI(params).then(({ respCode, respMsg, result }) => {
            if (respCode !== "0") {
              // 加载失败
              this.$toast.fail(respMsg);
              reject({
                respMsg: respMsg
              });
              return;
            }
            if (result) {
              resolve({
                orderNo: result
              });
              // console.log(result);
            }
          });
        });
      };
      const readyPay = orderNo => {
        console.log(orderNo);
        return new Promise((resolve, reject) => {
          var params = {
            out_trade_no: orderNo.orderNo
          };
          var self = this;
          wechatPayAPI(params).then(({ respCode, respMsg, result }) => {
            if (respCode !== "0") {
              // 加载失败
              this.$toast.fail(respMsg);
              reject({
                respMsg: respMsg
              });
              return;
            }
            if (result) {
              resolve({
                ...result
              });
            }
          });
        });
      };
      beforeCreateOrder().then(orderNo => {
        readyPay(orderNo).then(
          ({ appid, timeStamp, nonceStr, packAge, signType, paySign }) => {
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: timeStamp,
              nonceStr: nonceStr,
              package: packAge,
              signType: signType,
              paySign: paySign,
              success: function(res) {
                console.log("success:" + JSON.stringify(res));
              },
              fail: function(err) {
                console.log("fail:" + JSON.stringify(err));
              }
            });
          }
        );
      });
    }
  },

  components: {}
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
